<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="query">
          <el-form-item>
            <el-input
              v-model="query.warehouseName"
              placeholder="仓库名称"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="loadUnits"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="dialog.addShow = true"
              >新建</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- ----------------------显示所有数据-------------------- -->
      <el-table :data="unitList" border style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="warehouseAddr" label="仓库地址">
        </el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称">
        </el-table-column>
        <el-table-column prop="nickName" label="负责人姓名"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              v-if="scope.row.status == 0 ? false : true"
              @click="handleEdit(scope.row.warehouseId)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                changeStatus({
                  warehouseId: scope.row.warehouseId,
                  status: scope.row.status == true ? 0 : 1,
                })
              "
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="pageInfo.pageSizes"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination> -->
    </el-card>
    <!-- -------------------修改dialog---------------------- -->
    <el-dialog title="修改仓库" :visible.sync="dialog.updateShow" width="30%">
      <el-form :model="unitInfo.editInfo">
        <el-form-item label="仓库名称" :label-width="formLabelWidth">
          <el-input
            v-model="unitInfo.editInfo.warehouseName"
            autocomplete="off"
            placeholder="请输入仓库名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库地址" :label-width="formLabelWidth">
          <el-input
            v-model="unitInfo.editInfo.warehouseAddr"
            autocomplete="off"
            placeholder="请输入仓库"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-cascader
            v-model="optionList"
            :options="options"
            @change="handleOptionChange"
            style="width: 100%"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="id" :label-width="formLabelWidth" hidden>
          <el-input v-model="unitInfo.editInfo.warehouseId"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="unitInfo.editInfo.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="updateUnit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------添加dialog---------------------- -->
    <el-dialog title="添加仓库" :visible.sync="dialog.addShow" width="30%">
      <el-form :model="unitInfo.addInfo">
        <el-form-item label="仓库名称" :label-width="formLabelWidth">
          <el-input
            v-model="unitInfo.addInfo.warehouseName"
            autocomplete="off"
            placeholder="请输入仓库名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库地址" :label-width="formLabelWidth">
          <el-input
            v-model="unitInfo.addInfo.warehouseAddr"
            autocomplete="off"
            placeholder="请输入仓库"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-cascader
            v-model="optionList"
            :options="options"
            @change="handleOptionChange"
            style="width: 100%"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="unitInfo.addInfo.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="addUnit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {},
      formLabelWidth: "100px",
      options: [],
      optionList: [],
      unitList: [],
      unitInfo: {
        addInfo: {},
        editInfo: {},
      },
      dialog: {
        addShow: false,
        updateShow: false,
      },
    };
  },
  methods: {
    addUnit() {
      this.unitInfo.addInfo.workNo =
        this.optionList[this.optionList.length - 1];
      this.$axios.post("/storages", this.unitInfo.addInfo).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.dialog.addShow = false;
          this.loadUnits();
        } else {
          this.$message.success("添加失败");
        }
        this.optionList = [];
      });
    },
    handleOptionChange() {
      this.unitInfo.editInfo.workNo =
        this.optionList[this.optionList.length - 1];
    },
    loadUnits() {
      this.$axios.post("/storages/queryAll", this.query).then((res) => {
        if (res.data.code == 200) {
          this.unitList = res.data.data.list; //当前页的数据
          this.unitList.forEach((element) => {
            element.status = element.status == 0 ? true : false;
          });
        }
      });
    },
    handleEdit(id) {
      this.$axios.get("/storages/" + id).then((res) => {
        if (res.data.code == 200) {
          this.unitInfo.editInfo = res.data.data.vo;
          this.optionList = [];
          this.optionList.push(this.unitInfo.editInfo.deptId + "");
          this.optionList.push(this.unitInfo.editInfo.jobId + "");
          this.optionList.push(this.unitInfo.editInfo.workNo);
          this.dialog.updateShow = true;
        }
      });
    },
    updateUnit() {
      this.$axios.put("/storages", this.unitInfo.editInfo).then((res) => {
        if (res.data.code == 200) {
          this.dialog.updateShow = false;
          this.loadUnits();
        }
      });
    },
    loadOptions() {
      this.$axios
        .get("/emps")
        .then((res) => {
          if (res.data.code == 200) {
            this.options = res.data.data.vos;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    changeStatus(unit) {
      this.$axios.put("/storages", unit).then((res) => {
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "状态已更新",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "更新失败，请重试",
          });
        }
      });
    },
  },
  mounted() {
    this.loadUnits();
    this.loadOptions();
  },
};
</script>